<route lang="jsonc" type="page">
    {
      "layout": "default",
      "style": {
        "navigationBarTitleText": "问医生",
        "navigationBarBackgroundColor": "#ffffff"
      }
    }
</route>

<script lang="ts" setup>
    
</script>

<template>
<view class="headers">
  <!-- 搜索栏 -->
  <view class="search-bar">
    <input placeholder="搜一搜：医生/疾病名称" class="search-input" />
  </view>

  <!-- 快速问医 -->
  <view class="quick-section">
    <view class="quick-left">
    <image src="/static/image/consult_ask_doctor@1x.png" mode="aspectFit" style="width: 33px;height: 33px;margin-right: 9px;"/>
      <view class="quick-text">
        <text class="title">快速问医 无需等待</text>
        <view class="subtitle">2w+名医在线问诊</view>
      </view>
    </view>
    <view class="quick-btn">去咨询</view>
  </view>

  <!-- 科室导航 -->
  <view class="departments-section">
    <view class="header">
      <text class="title">按科室找医生</text>
      <navigator class="more">全部科室 ></navigator>
    </view>
    <view class="departments">
      <!-- 每行4个科室，共3行 -->
      <view class="row">
        <view class="item">
          <image src="/static/image/dermatological@1x.png" class="icon" />
          <text>皮肤科</text>
        </view>
        <view class="item">
          <image src="/static/image/pediatrics@1x.png" class="icon" />
          <text>儿科</text>
        </view>
        <view class="item">
          <image src="/static/image/gynaecology@1x.png" class="icon" />
          <text>妇科</text>
        </view>
        <view class="item">
          <image src="/static/image/obstetrics@1x.png" class="icon" />
          <text>产科</text>
        </view>
      </view>
      <view class="row">
        <view class="item">
          <image src="/static/image/GI_Medicine@1x.png" class="icon" />
          <text>消化内科</text>
        </view>
        <view class="item">
          <image src="/static/image/urology@1x.png" class="icon" />
          <text>泌尿外科</text>
        </view>
        <view class="item">
          <image src="/static/image/orthopaedics@1x.png" class="icon" />
          <text>骨科</text>
        </view>
        <view class="item">
          <image src="/static/image/EnT@1x.png" class="icon" />
          <text>耳鼻喉科</text>
        </view>
      </view>
      <view class="row">
        <view class="item">
          <image src="/static/image/nephrology@1x.png" class="icon" />
          <text>普内科</text>
        </view>
        <view class="item">
          <image src="/static/image/Respiratory_Medicine@1x.png" class="icon" />
          <text>呼吸内科</text>
        </view>
        <view class="item">
          <image src="/static/image/General_surgery@1x.png" class="icon" />
          <text>普外科</text>
        </view>
        <view class="item">
          <image src="/static/image/ophthalmology@1x.png" class="icon" />
          <text>眼科</text>
        </view>
        
      </view>
    </view>
  </view>

  <!-- 名医推荐 -->
  <view class="doctors-section">
    <view class="header">
      <text class="title">名医推荐</text>
      <text class="subtitle">获取更多诊疗建议</text>
      <view class="tags">
        <text class="tag active">皮肤科</text>
        <text class="tag">儿科</text>
        <text class="tag">妇科</text>
        <text class="tag">产科</text>
        <text class="tag">慢性病</text>
        <text class="tag">耳鼻...</text>
        <image src="/static/image/more@1x.png" style="width: 25px;height: 25px;margin-left: 10px;" />
      </view>
    </view>
    <view class="doctor">
      <view class="avatar-wrap">
        <image src="/static/image/rentou.png" style="width: 50px;height: 50px;" />
        <view class="level-tag">三甲</view>
      </view>
      <view class="info">
        <text class="name">王医生</text>
        <text class="dept">内分泌科 | 主任医师</text>
        <view class="hospital">积水潭医院</view>
        <text class="skill">擅长：糖尿病，高血压，痛风，糖尿病，高血压，痛风...</text>
        <view class="rating">
          <text class="star">★ 4.9</text> 
          <text class="count">接诊数 1.5万</text>
        </view>
        <text class="price">¥10</text>
        <text class="consult-btn">问医生</text>
      </view>
      
    </view>
  </view>

  </view>
</template>

<style lang="scss" scoped>
    .custom-navigation {
  height: 70px;
  padding-top: 20px;
  background: #ffffff;
  text-align: center;
  color: white;
  line-height: 90px;
}
.container {
  background-color: #fff;
  font-family: PingFang SC, sans-serif;
  color: #333;
}
.headers {
  /* margin-bottom: 20px; */
  width: 100%;
  padding-bottom:15px ;
}
.titles {
  font-size: 17px;
  margin-left: 115px;
  font-weight: bold;
}
/* 搜索栏：高度适中 + 圆角 */
.search-bar {
  padding: 20rpx 30rpx; /* 上下20，左右30 */
  background-color: #fff;
}
.search-input {
  box-sizing: border-box;
  width: 100%;
  height: 70rpx; /* 高度70rpx，符合拇指点击 */
  padding-left: 60rpx; /* 预留搜索图标位置 */
  background: #fff;
  border-radius: 35rpx; /* 圆角35，占高度一半 */
  font-size: 26rpx; /* 文字26rpx，清晰不挤 */
  border: none;
  outline: none;
  border: 1rpx solid #f2f2f2 ;
}

/* 快速问医：图标+文字+按钮紧凑排版 */
.quick-section {
  box-sizing: border-box;
  margin: 0 auto;
  width: 690rpx;
  height: 144rpx;
  border-radius: 40px;
background: #FAFAFA;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx; /* 同搜索栏间距 */
  margin-top: 10rpx;
}
.quick-left {
  display: flex;
  align-items: center;
}
.icon-ask {
  margin-right: 20rpx;
  width: 50rpx; /* 图标50rpx，比之前小 */
  height: 50rpx;
  background-color: #2CB5A5;
  color: #fff;
  border-radius: 50%;
  margin-right: 15rpx;
  font-size: 26rpx; /* 文字26rpx，居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.quick-text .title {
  font-size: 28rpx; /* 标题28rpx */
  font-weight: bold;
  color: #2CB5A5;
}
.quick-text .subtitle {
  font-size: 24rpx; /* 副标题22rpx，浅灰 */
  color: #999;
  margin-top: 5rpx;
}
.quick-btn {
  width: 100rpx;
  height: 58rpx;
  background-color: #e5f3f2;
  color: #2CB5A5;
  text-align: center;
  line-height: 58rpx;
  font-size: 28rpx; /* 按钮文字24rpx */
  border-radius: 55rpx; /* 圆角30，更圆润 */
  border: none;
}

/* 科室导航：图标+文字整齐排列 */
.departments-section {
  background-color: #fff;
  margin-top: 20rpx;
}
.departments-section .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #ECECEC;
}
.departments-section .header .title {
  font-size: 28rpx; /* 标题28rpx */
  font-weight: bold;
}
.departments-section .header .more {
  font-size: 24rpx; /* 更多24rpx，绿色 */
  color: #aaa;
  text-decoration: none;
}
.departments {
  width: 690rpx;
  margin: 10rpx auto;
  box-sizing: border-box;
  border-radius: 40px;
  background: #FAFAFA;
  padding: 20rpx 30rpx;
}
.departments .row {
  display: flex;
  justify-content: space-between; /* 均匀分布 */
  margin-bottom: 30rpx;
}
.departments .item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 22%; /* 每行4个，留间距 */
}
.departments .item .icon {
  width: 50rpx; /* 图标50rpx，和“问”图标呼应 */
  height: 50rpx;
  margin-bottom: 10rpx;
}
.departments .item text {
  font-size: 22rpx; /* 文字22rpx */
  color: #666;
}

/* 名医推荐：标签+医生信息分层 */
.doctors-section {
  background-color: #fff;
  margin-top: 20rpx;
}
.doctors-section .header {
  padding: 20rpx 30rpx;
}
.doctors-section .header .title {
  font-size: 28rpx; /* 标题28rpx */
  font-weight: bold;
}
.doctors-section .header .subtitle {
  font-size: 22rpx; /* 副标题22rpx，浅灰 */
  color: #999;
  margin-top: 5rpx;
  display: block;
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx; /* 标签间距15rpx */
  margin-top: 15rpx;
}
.tags .tag {
  padding: 10rpx 20rpx; /* 标签内边距10+20 */
  border-radius: 25rpx; /* 圆角25 */
  background-color: #F5F5F5;
  color: #999;
  font-size: 22rpx; /* 文字22rpx */
}
.tags .tag.active {
  background-color: #2CB5A5;
  color: #fff;
}
.more-icon {
  width: 25rpx; /* 更多图标25rpx */
  height: 25rpx;
  margin-left: 8rpx;
  align-self: center;
}
.doctor {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  border-top: 1rpx solid #ECECEC;
}
.avatar-wrap {
  position: relative;
  width: 90rpx; /* 头像90rpx，适中 */
  height: 90rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 20rpx;
}
.avatar-wrap .avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.level-tag {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #2CB5A5;
  color: #fff;
  font-size: 18rpx; /* 角标文字18rpx */
  padding: 5rpx 10rpx; /* 内边距5+10 */
  border-radius: 8rpx 0 0 0; /* 圆角8 */
}
.info {
  flex: 1;
}
.info .name {
  font-size: 26rpx; /* 姓名26rpx，加粗 */
  font-weight: bold;
  margin-bottom: 5rpx;
}
.info .dept {
  font-size: 22rpx; /* 科室22rpx，浅灰 */
  color: #999;
  margin-bottom: 5rpx;
}
.info .hospital {
  font-size: 20rpx; /* 医院20rpx，更浅灰 */
  color: #999;
  margin-bottom: 10rpx;
}
.info .skill {
  font-size: 22rpx; /* 擅长22rpx */
  color: #666;
  line-height: 1.4;
  margin-bottom: 10rpx;
}
.rating {
  display: flex;
  align-items: center;
  margin-bottom: 5rpx;
}
.rating .star {
  color: #FFB400;
  margin-right: 5rpx;
}
.rating .count {
  color: #999;
  font-size: 20rpx; /* 接诊数20rpx */
  margin-left: 10rpx;
}
.info .price {
  font-size: 30rpx; /* 价格24rpx，绿色 */
  color: #2CB5A5;
  font-weight: bold;
  margin-bottom: 5rpx;
}
.consult-btn {
  padding: 12rpx 24rpx; /* 和“去咨询”按钮统一 */
  background-color: #e5f3f2;
  color: #2CB5A5;
  font-size: 24rpx; /* 文字24rpx */
  border-radius: 30rpx; /* 圆角30 */
  border: none;
  align-self: flex-start; /* 居左对齐，符合设计稿 */
  margin-left: 170px;
}
</style>